<template>
  <div id="UserCenter">
    <!-- 头部 -->
    <div class="HeadUser">
      <!-- 头像 -->
      <div>
        <img :src="icona" alt="" />
      </div>
      <!-- 登录 -->
      <div style="margin-top: 13px">
        <!-- 用户名 -->
        <span :class="icondd" v-if="isLogin || uname">{{ uname }}</span>
        <!-- 登录 -->
        <span @click="tologin" v-else
          ><van-button type="info" size="small" color="#a38d6b"
            >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;登录&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</van-button
          ></span
        >
        <span class="iconbb" v-show="iconshow">年度大会员</span>
      </div>
      <!-- 登录弹窗 -->
      <van-popup
        v-model="showlogin"
        round
        position="bottom"
        :style="{ height: '58%' }"
      >
        <Login v-if="showlogin"></Login>
      </van-popup>
      <!-- 注册弹窗 -->
      <van-popup
        v-model="showReg"
        round
        position="bottom"
        :style="{ height: '65%' }"
      >
        <Register v-if="showReg"></Register>
      </van-popup>
      <!-- 忘记密码弹窗 -->
      <van-popup
        v-model="showLossPwd"
        round
        position="bottom"
        :style="{ height: '50%' }"
      >
        <LossPwd v-if="showLossPwd"></LossPwd>
      </van-popup>
    </div>

    <!-- 个人信息 -->
    <div class="myInformation">
      <p>我的订单</p>
      <van-grid icon-size="20px" column-num="4" :gutter="12">
        <van-grid-item
          v-for="(item, i) in order"
          :key="i"
          :icon="item.icon"
          :text="item.name"
          :to="`/orderDetail?id=${i}`"
        />
      </van-grid>
    </div>

    <!-- aha会员 -->
    <div class="novoistMember">
      <router-link to="/vip">
        <img src="../../assets/images/UserCenter/bg_not_aha.png" alt="" />
        <strong>诺心会员</strong>
        <p>尊享更多礼遇</p>
      </router-link>
    </div>

    <!-- 我的订单 -->
    <div class="myOrder">
      <p>我的信息</p>
      <van-grid icon-size="20px" column-num="4" :gutter="12">
        <van-grid-item
          v-for="(item, i) in information"
          :key="i"
          :icon="item.icon"
          :text="item.name"
          :to="item.to"
        />
        <van-grid-item icon="share" text="退出登录" @click="loginout" />
      </van-grid>
    </div>
    <!-- 底部栏 -->
    <foot></foot>
  </div>
</template>

<script>
// import { mapState } from "vuex"
import Login from "@/components/Login&Register/Login.vue"
import LossPwd from "@/components/Login&Register/LossPwd.vue"
import Register from "@/components/Login&Register/Register.vue"
export default {
  components: { Login, Register, LossPwd },
  data() {
    return {
      // vip文字
      icondd: "icondd",
      // vip标识
      iconshow: false,
      // 用户头像
      icona: "images/details/details_5.jpg",
      isLogin: false, //是否登录
      uname: "", //用户名
      // 是否显示登录页面
      showlogin: false,
      // 是否显示注册页面
      showReg: false,
      // 是否显示找回密码页面
      showLossPwd: false,
      order: [
        { name: "我的订单", icon: "label" },
        { name: "待付款", icon: "gold-coin" },
        { name: "待发货", icon: "send-gift" },
        { name: "待收货", icon: "shop" },
      ],
      information: [
        { name: "修改信息", icon: "manager", to: "/material" },
        { name: "我的地址", icon: "location", to: "/address" },
        { name: "会员积分", icon: "vip-card", to: "/integral" },
        { name: "优惠卡券", icon: "coupon", to: "/coupon" },
        {
          name: "评价商品",
          icon: "comment",
          to: "/my_comments?name=魔鬼蛋糕&img=img/huojian.jpg",
        },
        { name: "记录瞬间", icon: "video", to: "/huojian" },
        { name: "人工客服", icon: "service", to: "/customer?sendId=3" },
        // { name: "退出登录", icon: "share", to: "" },
      ],
    }
  },
  // 路由守卫
  beforeRouteLeave(to, from, next) {
    if (
      this.uname == "" &&
      from.name == "UserCenter" &&
      (to.name == "Material" ||
        to.name == "Address" ||
        to.name == "Integral" ||
        to.name == "Coupon" ||
        to.name == "My_comments" ||
        to.name == "Huojian" ||
        to.name == "Customer")
    ) {
      this.$toast("请先登录")
      return
    }
    next()
  },
  computed: {
    // ...mapState(["user"]),
  },
  mounted() {
    // 监听登录状态
    this.$eventBus.$on("loginstatus", data => {
      this.icona = data.user_icon
      // console.log(data)
      // console.log(data.user_role)
      if (data.user_role == 1) {
        ;(this.icondd = "icondd"), (this.iconshow = true)
      } else {
        this.icondd = "iconcc"
        this.iconshow = false
      }
    })
    var token = localStorage.getItem("token") //加载时获取token --match
    // console.log('token的值是',token);
    if (token != null) {
      //token不为空时，带着token发送请求到后台验证token是否失效
      let url = "/v1/login/verify"
      let params = { token }
      this.$get(url, params).then(res => {
        // console.log(res.data.data)
        if (res.data.data) {
          this.uname = res.data.data[0].uname
          this.icona = res.data.data[0].user_icon
          this.isLogin = true
          if (res.data.data[0].user_role == 1) {
            ;(this.icondd = "icondd"), (this.iconshow = true)
          } else {
            this.icondd = "iconcc"
            this.iconshow = false
          }
        }
      })
    } else {
      this.uname = ""
      this.isLogin = false
    }
  },
  methods: {
    // 跳转登录
    tologin() {
      this.showlogin = true
      this.showReg = false
      // 监听成功登录事件
      this.$eventBus.$on("loginstatus", data => {
        this.showlogin = false
        this.isLogin = true
        this.uname = data.uname
        // this.icona = data.user_icon
        // console.log(data)
        // console.log('监听到了',this.uname,this.isLogin);
      })
      // 监听注册事件
      this.$eventBus.$on("toReg", data => {
        this.showReg = true
        this.showlogin = false
      })
      // 监听登录事件
      this.$eventBus.$on("toLogin", data => {
        this.showlogin = true
        this.showReg = false
        this.showLossPwd = false
        this.isShow = false
      })
      // 监听忘记密码事件
      this.$eventBus.$on("lossPwd", data => {
        this.showlogin = false
        this.showLossPwd = true
      })
    },
    // 退出登录
    loginout() {
      // 清除本地token
      localStorage.removeItem("token")
      localStorage.removeItem("product")
      localStorage.removeItem("count")
      // console.log(localStorage.getItem('token'));
      if (this.isLogin == true) {
        this.$toast("退出成功")
      }
      this.icona = "images/details/details_5.jpg"
      this.uname = ""
      this.isLogin = false
      this.iconshow = false
    },
  },
}
</script>

<style lang="scss">
#UserCenter {
  color: #3e3e3e;
  // 头部
  > .HeadUser {
    padding-top: 1rem;
    width: 100%;
    background: #ffffff;
    height: 10.8rem;
    margin-bottom: 1rem;

    // 头像
    > div:first-child {
      width: 4.8rem;
      height: 4.8rem;
      margin: 0.5rem auto;
      border-radius: 50%;
      overflow: hidden;
      > img {
        height: 100%;
      }
    }

    // 点击登录-与-用户名
    > a,
    span {
      display: block;
      font-size: 0.9rem;
      text-align: center;
      // color: #000000;
    }

    // 大会员文字
    .icondd {
      color: #fc112c;
      font-size: 1.2rem;
      margin-bottom: 0.4rem;
    }
    // 大会员图标
    .iconbb {
      width: 5rem;
      background-color: #fc112c;
      color: #ffffff;
      padding: 0.1rem 0;
      border-radius: 0.2rem;
      margin: 0 auto;
      font-size: 0.8rem;
    }
    // 普通用户
    .iconcc {
      font-size: 1.2rem;
      line-height: 3rem;
    }
  }

  // 个人信息 与 我的订单
  .myInformation,
  .myOrder {
    width: 90%;
    background: #ffffff;
    margin: 0 auto;
    border-radius: 0.3125rem;
    margin-bottom: 1.5rem;

    // 我的信息
    > p {
      height: 2.3rem;
      line-height: 2.8rem;
      border-bottom: 1px solid #f9f9f9;
      margin: 0;
      padding-left: 1rem;
      font-size: 0.8rem;
    }
    // 我的信息详情
    > .van-grid {
      width: 95%;
      margin: 0 auto;
      [class*="van-hairline"]::after {
        border: none;
      }
      // 信息单独项
      > .van-grid-item {
        // 图片
        .van-icon {
          padding: 0.3rem 0 0.5rem 0;
          color: #c9ac7f;
        }
        // 文字
        .van-grid-item__text {
          text-align: center;
          margin: 0;
        }
      }
    }
  }

  // aha会员
  .novoistMember {
    width: 90%;
    margin: 0 auto;
    position: relative;
    height: 5rem;
    img {
      position: absolute;
      width: 100%;
    }
    strong,
    p {
      position: absolute;
      left: 25%;
      top: 13%;
      color: #ffffff;
      font-size: 0.8rem;
    }
    p {
      top: 34%;
    }
  }
}
</style>
